import React, {
	Component
} from 'react';
import {
	Tools,
	WhiteSpace,
} from "weaver-mobile";
import {
	toJS
} from 'mobx';
import Input from './Input';
import {
	observer
} from 'mobx-react';
import VerificationCode from '../forgetPassword/VerificationCode';
const getLabel = Tools.getLabel;

@observer
export default class Form extends Component {
	constructor(props) {
		super(props);
		this.labels = [getLabel(32738, '旧密码'), getLabel(27303, '新密码'), getLabel(511112, '确认密码'), getLabel(511113, '验证码')];
		this.keys = ['a', 'b', 'c', 'd'];
	}

	render() {
		const {
			store
		} = this.props, {
			placeholders,
			values,
			date,
		} = store;

		const Label = props => {
			const {
				label
			} = props;

			return (
				<div className='change-password-label'>{
					`${label}:`
				}</div>
			)
		}
		
		return (
			<div className='form'>
				{
					this.labels.map( (label,index) => {
						const placeholder = (index === 0) ? toJS(placeholders)[0].replace(/！/,'') : toJS(placeholders)[index];

						return (
							<div key={this.keys[index]}>
								<Label label={label}/>
								<WhiteSpace size='lg'/>
								<Input placeholder={placeholder} index={index} value={toJS(values)[index]} store={store}/>
								<WhiteSpace size='lg'/>
							</div>
						)
					})
				}
				<div className='verificationCode'>
					<VerificationCode date={date} extra={{from: '_changePass'}}/>
				</div>
			</div>
		)
	}

}